<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机成绩排行</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>
</head>

<body>
<!-----------头部开始--------------->
<%@ include file="page_head.jsp"%>
<!-----------头部结束--------------->
<!-----------内容开始--------------->
 <div class="content">
   <p class="yourscore">您当前的排名为：第<span id="current_rank">0</span>名</p>
<%--   <ul class="relat_biaoshi_ul test_onelist">--%>
<%--      <li>--%>
<%--        <a class="testcaraclick" href="#" tip="#dayscore">今日</a>--%>
<%--      </li>--%>
<%--      <li>--%>
<%--        <a href="#" tip="#weekscore">本周</a>--%>
<%--      </li>--%>
<%--      <li>--%>
<%--        <a href="#" tip="#monthscore">本月</a>--%>
<%--      </li>--%>
<%--      <li>--%>
<%--        <a href="#" tip="#allscore">全部</a>--%>
<%--      </li>--%>
<%--      <div class="clear"></div>--%>
<%--   </ul>--%>
   <div class="tab_change_rank">
       <div id="dayscore" >
          <div class="contentnew">
              <ul class="contentnew_con score_rank_mess" id="user_rank_ul">
<%--                 <li>--%>
<%--                    <a href="#" class="touxiang"><img src="images/toouimg.jpg"></a>--%>
<%--                    <div class="message_rank">--%>
<%--                      <p>陈小春<span>男</span></p>--%>
<%--&lt;%&ndash;                        <p>小红<b>女</b></p>&ndash;%&gt;--%>
<%--                        <span>考100分   共6分30秒</span>--%>
<%--                    </div>--%>
<%--                    <div class="ranks">第<span>1</span>名</div>--%>
<%--                    <div class="clear"></div>--%>
<%--                 </li>--%>
              </ul>
              <div class="noborder">&nbsp;</div>
           </div>
       </div>
   </div>
 </div>
 <!-----------内容结束--------------->
<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>
 
</body>

<script>
    var layer;
    layui.use('layer',function(){
        layer=layui.layer;
    })

    $("#page_head_title").text("成绩排行");

    window.onload=function(){
        initUser_rank();
    }

    function initUser_rank(){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_user/init_user_rank.do",
            success:function (data,status){
                if(status=="success"){
                    $("#current_rank").text(data.current_rank);
                    $("#user_rank_ul").empty();
                    var rankList=data.rankList;
                    var userList=data.userList;
                    var path_head="${pageContext.request.contextPath}/img_artificial/user_img/"
                    for(var i=0;i<rankList.length;i++){
                        var li=$("<li></li>");
                        var img_path=path_head+userList[i].user_img;
                        var a_img=$("<a></a>").attr({
                            "href":"javascript:to_img_detail('"+userList[i].user_nickname+"',"+userList[i].sex+",'"+img_path+"');",
                            "class":"touxiang"
                        });
                        var img=$("<img>").attr("src",img_path);
                        a_img.append(img);
                        var div1=$("<div></div>").attr("class","message_rank");
                        var p_nan=$("<p></p>").html(userList[i].user_nickname+"<span>男</span>");
                        var p_nv=$("<p></p>").html(userList[i].user_nickname+"<b>女</b>");
                        var span=$("<span></span>").html("做过"+rankList[i].did_num+"题"+"&nbsp;&nbsp;&nbsp;"+"做对"+rankList[i].right_num+"题");
                        if(userList[i].sex==1){
                            div1.append(p_nan,span);
                        }else{
                            div1.append(p_nv,span);
                        }
                        var j=i+1;
                        var div2=$("<div></div>").attr("class","ranks").html("第"+"<span>"+j+"</span>"+"名");
                        var div_clear=$("<div></div>").attr("class","clear");
                        li.append(a_img,div1,div2,div_clear);
                        $("#user_rank_ul").append(li);
                    }
                    <%--                      <li>--%>
                    <%--                    <a href="#" class="touxiang"><img src="images/toouimg.jpg"></a>--%>
                    <%--                    <div class="message_rank">--%>
                    <%--                      <p>陈小春<span>男</span></p>--%>
                    <%--&lt;%&ndash;                        <p>小红<b>女</b></p>&ndash;%&gt;--%>
                    <%--                        <span>考100分   共6分30秒</span>--%>
                    <%--                    </div>--%>
                    <%--                    <div class="ranks">第<span>1</span>名</div>--%>
                    <%--                    <div class="clear"></div>--%>
                    <%--                 </li>--%>
                }
            }
        })
    }

    function to_img_detail(user_nickname,sex,user_img){
        var w=$(window).width()*0.55;
        var h=$(window).height()*0.35;
        var sex_icon="♀";
        if(sex==1)
            sex_icon="♂"
        layer.open({
            type:2,
            title:user_nickname+sex_icon,
            area:[w+'px',h+'px'],
            shadeClose:true,
            content:"img_detail.jsp?user_img_hidden="+user_img,
        })
    }
</script>













<!--头部高度赋给列表的topjs-->
<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})
	/*模拟考试列表分类车型选择tab切换*/
 $(function(){
	 $(".test_onelist li a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".test_onelist li a").removeClass("testcaraclick");
		  $(this).addClass("testcaraclick");
		 })
	
	})
	
 </script>
 
<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("#incltialiu li:eq(0) img").height();
   $(".main,.width,#incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	$(".titlemore").toggle(function(){
		$(this).parent(".tabtila").siblings(".moresort").show()
		$(this).children("img").attr("src","images/title_692.jpg")
		},function(){
		$(this).parent(".tabtila").siblings(".moresort").hide()
		$(this).children("img").attr("src","images/title_69.jpg")
		})
  </script>
 <!--首页标题点击出现更多分类js-->
</html>
